import { Button, Descriptions, Radio, RadioChangeEvent} from "antd";
import {useEffect, useState} from "react";
import {useRouter} from "next/navigation";
import {getFetch} from "@/app/lib/HttpProtocol";
import {setCurrentWork} from "@/app/lib/security";

const workStyle:React.CSSProperties = {
  flex: 'auto',
  color: 'rgba(0, 0, 0, 0.88)',
  fontWeight: 600,
  fontSize: 16,
  lineHeight: 1.5
}
const workItemStyle:React.CSSProperties = {
  marginLeft:10,
  marginTop:10,
}

const apis = {
  workWithRolesApi:'/auth/workWithRoles/list'
}
function findCurrentWork(list: any) {
  // @ts-ignore
  let work = list.find(w => w.current);
  return work.id;
}
function genWorkList(workList:any[]){
  return workList.map(w => {
    return (<Descriptions title={(<Radio value={w.id}>浙江万马股份有限公司</Radio>)} column={2} style={workItemStyle}>
      <Descriptions.Item label="职位" span={1}>{w.positionName}</Descriptions.Item>
      <Descriptions.Item label="职级" span={1}>{w.positionType}{w.positionLevel}</Descriptions.Item>
      <Descriptions.Item label="部门" span={2}>
        <>
          {w.depts == null ? <br/> : w.depts.map(function (d:any) {
            return <>{d.name}{d.manager == 1 ? '(管理员)' : ''}<br/></>;
          })}
        </>
      </Descriptions.Item>
      <Descriptions.Item label="角色" span={2}>
        <>
          {w.roles == null ? <br/> : w.roles.map(function (r:any) {
            return <>{r.name}<br/></>;
          })}
        </>
      </Descriptions.Item>
    </Descriptions>)
  });
}
export default function WorkInfo(){
  const [workList,setWorkList] = useState<any[]>([])
  const [work,setWork] = useState('');
  useEffect(() => {
    getFetch(apis.workWithRolesApi,null).then(data =>{
      let list:any = data;
      if(list != null && list.length != 0){
        setWorkList(list);
        setWork(findCurrentWork(list));
      }
    })
  },[])
  let router = useRouter();
  function onRadioChange(e:RadioChangeEvent){
    setWork(e.target.value);
  }
  function changeWork(work:string){
    console.log(work);
    setCurrentWork(work);
    router.push("/")
  }
  return workList.length == 0 ? (<></>) : (
    <div>
      <p style={workStyle}>
        <span>工作信息</span>
        <Button style={{marginLeft:'45%'}} onClick={() => changeWork(work)}>切换工作</Button>
      </p>
      <Radio.Group onChange={onRadioChange} value={work}>
        {genWorkList(workList)}
      </Radio.Group>
    </div>
  )
}